<template>
	<div class="task-preview-container">
		<div class="task-details">
			<div class="task-info">
				<span class="info-label">编程语言:</span>
				<span class="info-value">{{task.l_name}}</span>
			</div>
			<div class="task-info">
				<span class="info-label">模块名称:</span>
				<span class="info-value">{{ task.m_name }}</span>
			</div>
			<div class="task-info">
				<span class="info-label">难易程度:</span>
				<span class="info-value">{{ task.completed }}</span>
			</div>
			<div class="task-info">
				<el-checkbox value="" name="type" v-model="codeTask.checked" @change="handleConditionChange">
					不会做
				</el-checkbox>
			</div>
		</div>
		<div class="task-content">
			<!-- <div v-html="task.detail"></div> -->
			 {{task.detail}}
<pre><code>public static void main(String[] args){
    System.out.println("hello world!");
}</code></pre>
		
		<!-- 显示答案 -->
		<el-divider content-position="left">您的答案</el-divider>
		<el-input
			v-model="codeTask.code"
			:autosize="{ minRows:15, maxRows: 180 }"
			type="textarea"
			placeholder="请输入任务答案"
			/>
		</div>
	</div>

	
</template>

<script>
import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import API from '@/api/index.js'
import Token from '@/api/token.js'
export default {
	components: {
		HeaderNav,
		TaskContainer,
	},
	// 拿到上一层页面任务
	props: {
		task: {
			type : Object,
			required: true,
		}
	},

	// 定义提交的代码和 不会做的数据
	data() {
		return {
			codeTask: {
				checked: this.task.checked || false,
				code: this.task.answer || "", // 初始化答案
			},
			couuerUser: Token.getUser(),
		}
	},
	// created() {
	// 	// 更新页面数据

	// },
	methods: {
		handleConditionChange(val){
			console.log("复选框状态: ", val);
			// 在下 执行 其他操作
		},
		// 上传答案和会不会做状态
		setCodeChecked() { 
			const parmas = {
				...this.codeTask,
				user_id: this.couuerUser.id,
				task_id: this.task.id
			}
			// console.log(parmas)
			API.setCodeAndState(parmas)
			.then(ret => {
				// 数据添加成功通知父组件 更新主页面数据
				this.$emit('answer-update')
				console.log('答案提交成功');
			})
			.catch(console=>{
				console.log('答案提交失败');
			});
		},
		
	},
	watch: {
		'task.answer': { 
			immediate: true,
			handler(){
				this.codeTask.code = this.task.answer;
				this.codeTask.checked = this.task.checked ? true : false;
			}
		}
	}
}
</script>

<style scoped>
.task-preview-container {
	margin: 0 auto;
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.task-header {
	text-align: center;
	margin-bottom: 20px;
}

.task-title {
	font-size: 28px;
	font-weight: bold;
	color: #333;
}

.task-details {
	display: flex;
	justify-content: space-between;
	line-height: 40px;
	background-color: #f3f3f3;
	margin-bottom: 10px;
	border-radius: 8px;
}

.task-info {
	flex: 1;
	text-align: center;
}

.info-label {
	font-weight: bold;
	color: #555;
	margin-right: 10px;
}

.info-value {
	color: #777;
}

.task-content {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	height: 600px;
	overflow: auto;
}

.task-content pre:has(>code) {
	background: #F0F2F5;
	color: #333;
	padding: 10px;
	border-radius: 5px;
	overflow-x: auto;
}
.task-content code {
	font-family: 'Courier New', Courier, monospace;
	font-size: 14px;
}

.task-content [v-html],
.task-content .task-detail-html,
.task-content [v-html] *,
.task-content .task-detail-html * {
  word-break: break-all !important;
  overflow-wrap: break-word !important;
  display: inline-block !important;
  width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .task-details {
    flex-direction: column;
    align-items: stretch;
    line-height: 28px;
    padding: 6px 0;
    gap: 2px;
  }
  .task-info {
    text-align: left;
    font-size: 14px;
    padding: 0 4px;
    margin-bottom: 2px;
    word-break: break-all;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .info-label {
    font-size: 13px;
    margin-right: 4px;
    min-width: 64px;
    color: #444;
  }
  .info-value {
    font-size: 13px;
    color: #666;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .task-content [v-html],
  .task-content .task-detail-html,
  .task-content [v-html] *,
  .task-content .task-detail-html * {
    font-size: 14px !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    display: inline-block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}
</style>